<template>

  <div class="app-container">

    <el-card class="box-card">
      <el-form ref="form" :model="form" label-width="100px" :rules="rules">

        <el-steps :active="active" simple style="margin: 20px 0" finish-status="success">

          <!--          第一步-->
          <el-step title="商品信息">
          </el-step>
          <!--          第二步-->
          <el-step title="任务要求">
          </el-step>
          <!--          第三步-->
          <el-step title="发布时间"></el-step>
        </el-steps>


        <div class="first" v-show="active == 0">
          <el-form-item label="店铺名称" prop="storename">
            <el-col :span="input_width">
              <el-input v-model="form.storename" placeholder="请输入店铺名称"></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="商品名称" prop="goodName">
            <el-col :span="input_width">
              <el-input v-model="form.goodName" placeholder="请输入商品名称"></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="商品链接" prop="goodLink">
            <el-col :span="input_width">
              <el-input v-model="form.goodLink" placeholder="请输入商品链接"></el-input>
            </el-col>
          </el-form-item>


          <el-form-item label="商品主图" prop="goodPic">
            <el-col :span="input_width">
              <!--              <el-input v-model="form.goodPic" placeholder="请输入商品链接"></el-input>-->
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-col>
          </el-form-item>

          <el-form-item label="展示价格" prop="showPrice">
            <el-col :span="input_width">
              <!--          <el-input v-model="form.goodPrice"></el-input>-->
              <el-input-number v-model="form.showPrice" :precision="2" :min="1" :max="6000"
                               label="描述文字"></el-input-number>
              元
            </el-col>
          </el-form-item>


          <el-form-item label="付款价格" prop="goodPrice">
            <el-col :span="input_width">
              <!--          <el-input v-model="form.goodPrice"></el-input>-->
              <el-input-number v-model="form.goodPrice" :precision="2" :min="1" :max="6000"
                               label="描述文字"></el-input-number>
              元
            </el-col>
          </el-form-item>


          <el-form-item label="下单数量" prop="goodNum">
            <el-col :span="input_width">
              <!--          <el-input v-model="form.name"></el-input>-->
              <el-input-number v-model="form.goodNum" :min="1" :max="1000" label="描述文字"></el-input-number>
              单
            </el-col>
          </el-form-item>


          <el-form-item label="搜索关键词" prop="goodKey">
            <el-col :span="input_width">
              <el-input v-model="form.goodKey" placeholder="请输入搜索关键词"></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="商家备注" prop="remark">
            <el-col :span="input_width">
              <el-input v-model="form.remark" type="textarea"
                        :rows="3"
                        placeholder="请输入内容"></el-input>
            </el-col>
          </el-form-item>

        </div>
        <div class="secsend" v-show="active == 1">

          <el-form-item label="货比三家" prop="complare">
            <el-col :span="input_width">
              <el-radio-group v-model="form.complare">
                <el-radio-button
                  v-for="dict in taskCompareGoodOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >{{dict.dictLabel}}
                </el-radio-button>
              </el-radio-group>
            </el-col>
          </el-form-item>


          <el-form-item label="增值服务" prop="servicelist">
            <el-col :span="input_width">
              <el-checkbox-group v-model="form.servicelist">
                <el-checkbox v-for="dict in taskServiceListOptions"
                             :key="dict.dictValue"
                             :label="dict.dictValue">{{dict.dictLabel}}
                </el-checkbox>
              </el-checkbox-group>
            </el-col>
          </el-form-item>


          <el-form-item label="评价要求" prop="trialEvaluate">
            <el-col :span="input_width">
              <el-radio-group v-model="form.trialEvaluate">
                <el-radio-button
                  v-for="dict in trialEvaluateOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >{{dict.dictLabel}}
                </el-radio-button>
              </el-radio-group>
            </el-col>
          </el-form-item>


          <el-form-item label="评价要求" prop="receivedetail">
            <el-col :span="input_width">
              <el-select v-model="form.receivedetail" placeholder="请选择">
                <el-option
                  v-for="item in taskReceiveDetailOptions"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>


        </div>
        <div class="thire" v-show="active == 2">
          <el-form-item label="发布日期" prop="pushDate">
            <el-col :span="input_width">
              <el-date-picker
                v-model="form.pushDate"
                type="date"
                placeholder="选择日期"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-col>
          </el-form-item>


          <el-form-item label="发布时段" prop="pushtime">
            <el-col :span="input_width * 2 ">
              <el-select v-model="form.pushtime" placeholder="请选择时间段">
                <el-option
                  v-for="item in datetimeoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>

              <el-input-number v-model="ordernum" :min="1" :disabled="form.goodNum - max_order == 0" :max="form.goodNum - max_order"></el-input-number>

              <el-button plain @click="addorder" :disabled="form.goodNum - max_order == 0">添加时间段</el-button>
            </el-col>
          </el-form-item>

          <el-form-item label="">
            <el-row :gutter="20">
              <el-col :span="4" v-for="o in dynamicOrder" :key="o.time">
                <el-card class="box-card">
                  <div>{{o.time-1}}~{{o.time}}点</div>
                  <div>{{o.ordernum}}单</div>
                </el-card>
              </el-col>
            </el-row>
          </el-form-item>

          <div>还有 {{form.goodNum - max_order}} 单没有安排</div>


        </div>


      </el-form>


      <el-card class="box-card">

        <el-button plain @click="pre" v-show="active > 0">上一步</el-button>
        <el-button type="warning" plain>佣金<span class="red ml5 fs20">{{}}</span>元</el-button>
        <el-button type="warning" plain>手续费<span class="red ml5 fs20">{{form.goodNum *2 }}</span>元</el-button>
        <el-button type="warning" plain>订单数量<span class="red ml5 fs20">{{form.goodNum}}</span><span
          class="unit">单</span></el-button>
        <el-button type="warning" plain>余额xx元</el-button>
        <el-button type="warning" plain>警告按钮</el-button>


        <el-button plain @click="next" v-show="active < 2">下一步</el-button>
        <el-button type="primary" @click="onSubmit" v-show="active == 2">立即创建</el-button>
        <!--        <el-button @click="reset">取消</el-button>-->


      </el-card>
    </el-card>

  </div>


</template>

<script>
  import {listTask, getTask, delTask, addTask, updateTask, exportTask} from "@/api/merchant/task";

  export default {
    data() {
      return {
        datetimeoptions: [
          {value: '1', label: '0~1点'},
          {value: '2', label: '1~2点'},
          {value: '3', label: '2-3点'},
          {value: '4', label: '3~4点'},
          {value: '5', label: '4~5点'},
          {value: '6', label: '5~6点'},
          {value: '7', label: '6~7点'},
          {value: '8', label: '7~8点'},
          {value: '9', label: '8~9点'},
          {value: '10', label: '9~10点'},
          {value: '11', label: '10~11点'},
          {value: '12', label: '11~12点'},
          {value: '13', label: '12~13点'},
          {value: '14', label: '13~14点'},
          {value: '15', label: '14~15点'},
          {value: '16', label: '15~16点'},
          {value: '17', label: '16~17点'},
          {value: '18', label: '17~18点'},
          {value: '19', label: '18~19点'},
          {value: '20', label: '19~20点'},
          {value: '21', label: '20~21点'},
          {value: '22', label: '21~22点'},
          {value: '23', label: '22~23点'},
          {value: '24', label: '23~00点'},
        ],
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() < (Date.now() - 3600 * 1000 * 24);
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '明天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          },]
        },
        imageUrl: '',
        active: 0,
        input_width: 10,
        max_order: 0, // 已经分配的订单数
        ordernum: 1,
        form: {
          'goodNum': 1,//下单数量
          'goodPrice': 1,//付款金额
          'showPrice': 1,//展示价格
          'servicelist': [],//增值服务
          'trialEvaluate': 0,//评价
          'complare': 0,//货比三家
          'pushDate': '',//发布日期


        },
        rTakingOptions: {},
        trialEvaluateOptions: {},
        taskServiceListOptions: {},
        taskCompareGoodOptions: {},
        taskReceiveDetailOptions: {},

        dynamicOrder: [],
        //task_receive_detail

        rules: {
          storename: [
            {required: true, message: "店铺名称不能为空", trigger: "blur"}
          ],
          goodName: [
            {required: true, message: "商品名称不能为空", trigger: "blur"}
          ], goodPrice: [
            {required: true, message: "商品价格不能为空", trigger: "blur"}
          ], goodNum: [
            {required: true, message: "下单数量不能为空", trigger: "blur"}
          ], goodKey: [
            {required: true, message: "搜索关键词不能为空", trigger: "blur"}
          ], goodLink: [
            {required: true, message: "商品链接不能为空", trigger: "blur"}
          ],
          rTaking: [
            {required: true, message: "选择聊天要求", trigger: "blur"}
          ],
          pushDate: [
            {required: true, message: "发布日期不能为空", trigger: "blur"}
          ]
        }
      }
    },
    created() {


      this.getDicts("mer_task_taking").then(response => {
        this.rTakingOptions = response.data;
      });


      this.getDicts("task_service_list").then(response => {
        this.taskServiceListOptions = response.data;
      });

      this.getDicts("task_trial_valuate").then(response => {
        this.trialEvaluateOptions = response.data;
      });
      this.getDicts("task_compare_good").then(response => {
        this.taskCompareGoodOptions = response.data;
      });
      this.getDicts("task_receive_detail").then(response => {
        this.taskReceiveDetailOptions = response.data;
      });

    }, methods: {
      onSubmit: function () {
        this.form;
        console.info(this.form)
        this.$message('提交任务')


        this.$refs["form"].validate(valid => {
          console.info(valid);
          if (valid) {
            console.info("验证通过")
            addTask(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                // this.open = false;
                // this.getList();
              } else {
                this.msgError(response.msg);
              }
            });
          }
        });
      },
      reset() {
        this.resetForm("form");
      },
      next() {
        this.active++;
      },
      pre() {
        this.active--;
      }
      ,
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },


      //动态订单分布
      addorder() {
        //判断是否超出了范围
        if (this.max_order + this.ordernum - this.form.goodNum > 0) {
          this.$message('数量选择错误,请重新选择')
          return;
        }

        if (!this.form.pushtime) {
          this.$message('请重新发布时间')
          return;
        }

        let time = this.form.pushtime;
        let dynamicOrder = this.dynamicOrder;
        console.info(dynamicOrder)
        for (let item = 0; item < dynamicOrder.length; item++) {
          if (dynamicOrder[item].time == time) {
            this.$message('该时间段已存在,请重新选择')
            return
          }

        }


        this.max_order = this.max_order + this.ordernum;
        this.dynamicOrder.push({time: this.form.pushtime, ordernum: this.ordernum});
        this.ordernum = this.form.goodNum - this.max_order;
      }

    }
  }
</script>

<style>

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .red {
    color: #ff675c;
  }

  .fs20 {
    /*font-size: 20px;*/
  }

  .ml5 {
    margin-left: 5px;
    margin-right: 5px;
  }

</style>
